<script type="text/javascript">
var paginationTotal = 1;//记录总数
var alert_level = <{$alert_level}>;
$(document).ready(function(){
	 $('#dateFrom,#dateTo').datepicker({
		changeMonth: true,
		changeYear: true,			 
		dateFormat: 'yy-mm-dd'
	});
	
	$("#messageDialog").dialog({
		autoOpen:false,
		modal:true,
		show:"slide",
		buttons:{
					"OK":function(){
						$(this).dialog("close");
					}
				}
	});
	
	$("#tipDialog").dialog({
		autoOpen:false,
		modal:true,
		show:"slide",
		buttons:{
				"Close":function(){
					$(this).dialog("close");
					jQuery ('.checkAll').attr('checked',false);
					initData(0);
				}
		}
	});
	
	$("#noteDialog").dialog({
		autoOpen:false,
		modal:true,
		show:"slide",
		width:400,
		buttons:{
				"Close":function(){
					$(this).dialog("close");
					initData(0);
				}
		}
	});

	if(alert_level !==''){
		var obj = $('li.tab-li').eq(alert_level);
		tabSelect(obj,alert_level);
	}
	
});

function tabSelect(obj,status){
	$("#searchForm [name=alert_level]").val(status);
	$(obj).addClass('tab-li-click');
	$(obj).siblings().removeClass('tab-li-click');

	initData(0);
	
}

function loadData(page,pageSize){
	alert_level = $("#searchForm [name=alert_level]").val();
    dateFrom = $("#searchForm [name=dateFrom]").val();
    dateTo = $("#searchForm [name=dateTo]").val();
    $.ajax({
        type: "POST",
        async: false,
        dataType: "json",
        url: "/merchant/alert/get-alerts",
        data:{
            'page':page,'pageSize':pageSize,
            'alert_level':alert_level,
            'dateFrom':dateFrom,'dateTo':dateTo
         },
        success: function(json) {
        	var html ='';
        	if(json.ask==1){            	
            	paginationTotal = json.total;
            	if (typeof json.result == 'undefined') return;
            	$.each(json.result,function(k,v){
            		var fontWeight = '';
            		if(v.alert_status === '0' || v.alert_status === 0){
            			fontWeight = 'font-weight:700;';
            		}
                	html +='<div class="row height25" style="'+fontWeight+'">';
                	html += '<div class="cell" style="width:4%">';
                	html += '<input type="checkbox" name="alert_ids" value="'+v.alert_id+'" title="'+v.alert_id+'" class="checked" />&nbsp;</div>';
                	html +='<div class="cell" style="width:76%;text-align:left;">';
                	html +='<span style="cursor:pointer;margin-left:8px;" onclick="getContent('+v.alert_id+')">'+v.alert_title+'</span></div>';
                	
					html +='<div class="cell2" style="width:20%;">'+v.alert_create_time+'</div>';
                	html +='</div>';
            	});
            	
         	}else{
         		paginationTotal = json.total;
         		html +='<div class="row height25" style="text-align:center;"> No Result.</div>';
         	}
         	$("#tab-div").html(html);
         	var tmp = json.statusTotal;
         	$("#status0").html(tmp.notice).attr('title','Unread Quanlity is : '+ tmp.notice); 
			$("#status1").html(tmp.warning).attr('title','Unread Quanlity is : '+ tmp.warning);
			$("#status2").html(tmp.important).attr('title','Unread Quanlity is : '+ tmp.important);
      	}
    });
}

function getContent(alert_id){
	$.ajax({
        type: "POST",
        async: false,
        dataType: "json",
        url: "/merchant/alert/detail",
        data:{
            'alert_id':alert_id
         },
        success: function(json) {
        	var html ='';
        	if(json.ask==1){            	
            	html += '<p>'+json.result.alert_note+'</p>';            	
         	}else{         		
         		html +='process failded!';
         	}
         	if(json.ask==1){
         		initData(0);
         	}
         	$("#noteDialog").html(html).dialog("open");         	
      	}
    });
	
}

function inquire(){
	initData(0);	
}

function checkAll(obj){
	if(jQuery (obj).attr("checked")=='checked'){
		jQuery ('.checked').attr('checked',true);
	}else{
	    jQuery ('.checked').attr('checked',false);
	}
}

function batchProcess(status){
	var alert_ids=[];
	$('input:checkbox[name="alert_ids"][checked]').each(function(i){
		alert_ids[i]=$(this).val();		
    });
    if(alert_ids.length==0){
    	$('#messageDialog').html("You must select at least one line").dialog("open");
		return;
    }
    
    $.ajax({
        type: "POST",
        async: false,
        dataType: "json",
        url: "/merchant/alert/batch-process",
        data:{
            'alert_status':status,'alert_ids':alert_ids
         },
        success: function(json) {
        	var html ='';
        	if(json.ask==1){            	
            	html +='process success!';            	
         	}else{         		
         		html +='process failded!';
         	}         	
         	$("#tipDialog").html(html).dialog("open");
         	
      	}
    });

}



</script>
<style>
	
	.bgc{background:#F2F8FD}
	.radiu{-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;overflow: hidden;}
	.info-top{height:10px}
	.tab-li{ float:left; padding:0; cursor:pointer; background:url(/images/menu-li-bg.gif) no-repeat center top; width:92px; height:25px; line-height:25px; text-align:center; color:white}
	.tab-li-click{background:url(/images/menu-li-bg-hover.gif) no-repeat center top}
	.tab-li:hover{ background:url(/images/menu-li-bg-hover.gif) no-repeat center top}
	.info-header{width:100%;height:200px;background:url(/images/nav-bg.png) no-repeat center top;border-bottom:1px solid #CCC;position:relative}
	.info-header h3{text-indent:10px;}
	.info-content{}
	.info-content-body{border-top:1px solid #CCC;width:100%;clear:both;min-height: 200px;}
	.info-content-menu{width:100%;height:25px}
	.info-header-content{position:absolute;top:50px;left:10px;width:870px;border:1px solid #CCC;}
	.cell20{width:180px;height:25px;line-height:25px;display:inline-block;overflow:hidden;border-bottom:1px solid #CCC;margin:0px;border-right:1px solid #CCC;margin:0px;float:left}
	.cell30{width:253px;height:25px;line-height:25px;display:inline-block;overflow:hidden;border-bottom:1px solid #CCC;margin:0px;border-right:1px solid #CCC;margin:0px;margin:0px;float:left}
	.no-bottom{border-bottom:none}
	.no-right{border-right:none}
	.error{color:red}
		
.line1 {
	height: 25px;
	width: 100%;
	background: none repeat scroll 0 0 #FFFFFF;
	text-align:center;
}
.line1:hover, .line2:hover{
	background-color:#F2F8F9;
}

.line2 {
	height: 25px;
	width: 100%;
}
.cell2 {
    background: url("") repeat-y scroll right top transparent;
    float: left;
    height: 25px;
    line-height: 25px;
    overflow: hidden;
    text-align: center;
}
</style>
<div class="position"><a href='/default/index'><{$languages['HOME']}></a> &gt; <a href='/merchant/my-account'><{$languages['MERCHANT_CENTER']}></a>  &gt; <{$languages['OPERATION']}> &gt; <{$languages['MESSAGE_LIST']}></div>

<h4><{$languages['MESSAGE_LIST']}></h4>
<div style="color:red;" id="message"></div>

<div id="search" style="margin-top:15px;margin-bottom:15px;">
	<form id="searchForm" name="searchForm" method="post" action="">	
		Date From:
		<input type="text" class="dateFrom" id="dateFrom" name="dateFrom" class="input-width-1" /> &nbsp; 	
		to
		<input type="text" class="dateTo" id="dateTo" name="dateTo" class="input-width-1" /> &nbsp;&nbsp;
		<input type="hidden" name="alert_level" value="<{$alert_level}>" />
		<span class="button-2" onclick="inquire()"><{$languages['SEARCH']}></span>
		<p>	
	</form>
</div>

<div class="info-content">
	<div class="info-content-menu radiu">
		<ul class="bgc"><!-- tab-li-click -->			
			<li class="tab-li" onclick="tabSelect(this,0)"><{$languages.NOTICE}>(<span id="status0"></span>)</li>
			<li class="tab-li" onclick="tabSelect(this,1)"><{$languages.WARNING}>(<span id="status1"></span>)</li>
			<li class="tab-li" onclick="tabSelect(this,2)"><{$languages.IMPORTANT}>(<span id="status2"></span>)</li>
		</ul>
	</div>	
</div>

<div class="order-operation" style="width:100%;margin-top:6px;margin-bottom:6px;" id="operation">
	<span class="button-2 bold" onclick="batchProcess(1)"><{$languages.MARK_AS_READ}></span>
	<span class="markUnread bold" onclick="batchProcess(0)"><{$languages.MARK_AS_UNREAD}></span>
	<span class="button-2 bold" onclick="batchProcess(2)"><{$languages.DELETE}></span>
</div>

<div class="row height25 row-header">
	<div class="cell" style="width:4%"><input class="checkAll" type="checkbox" onclick="checkAll(this)">&nbsp;</div>
	<div class="cell sort" style="width:76%"><{$languages.TITLE}></div>
	<div class="cell no-background" style="width:20%"><{$languages.CREATED_DATE}></div>
</div>

<div class="tab-div" id="tab-div">	</div>

<div class="pagination"></div>


<div id="right_confirm" style="display: none;">
	<p style="text-align:center;font-size: 14px;color: red;font-weight: bold;">
	Are you sure to delete it?
	</p>
</div>

<div id="noteDialog" style="display:none" title="note"></div>
<div id="tipDialog" style="display:none" title="Tip"></div>

<div id="messageDialog" style="display:none;" title="message"></div>